<template>
  <div id="app" :data-theme="theme1">
    <router-view></router-view>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { toRefs, reactive, watch } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      theme1: "",
    });
    const store = useStore();
    // const { proxy } = getCurrentInstance();
    state.theme1 = store.state.theme;

    watch(
      () => store.state.theme,
      (newValue) => {
        // 因为watch被观察的对象只能是getter/effect函数、ref、
        // 热active对象或者这些类型是数组
        // 所以需要将state.count变成getter函数
        state.theme1 = newValue;
      }
    );
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss">
@import "./assets/style/reset.scss";
@import "./assets/style/common.scss";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
